<template>
  <div class="admin-container">
    <!-- 头部导航栏 -->
    <el-card class="header-bar">
      <div class="header-content">
        <!-- 左侧问候和用户名 -->
        <div class="left-section">
          <span class="greeting">{{ timePeriod }}好，</span>
          <span class="username">{{ userInfo.userName }}</span>
        </div>

        <!-- 右侧时间显示 -->
        <div class="right-section">
          <div class="real-time-clock">
            <span class="time-part">{{ formattedTime.hours }}</span>
            <span class="time-separator">:</span>
            <span class="time-part">{{ formattedTime.minutes }}</span>
            <span class="time-separator">:</span>
            <span class="time-part seconds">{{ formattedTime.seconds }}</span>
          </div>
          <div class="date-display">{{ currentDate }}</div>
        </div>
      </div>
    </el-card>

    <!-- 数据概览卡片 -->
    <el-row :gutter="50" class="data-cards">
      <el-col :xs="24" :sm="12" :md="8" :lg="8">
        <el-card class="stat-card">
          <div class="card-content">
            <div class="card-icon bg-blue">
              <el-icon>
                <User/>
              </el-icon>
            </div>
            <div class="card-info">
              <div class="value">{{ totalUserNum }}</div>
              <div class="label">总用户数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 新增管理员核心指标 -->
      <el-col :xs="24" :sm="12" :md="8" :lg="8">
        <el-card class="stat-card">
          <div class="card-content">
            <div class="card-icon bg-green">
              <el-icon>
                <DocumentAdd/>
              </el-icon>
            </div>
            <div class="card-info">
              <div class="value">{{totalAppointmentNum}}</div>
              <div class="label">预约总数</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="8" :lg="8">
        <el-card class="stat-card">
          <div class="card-content">
            <div class="card-icon bg-red">
              <el-icon>
                <Warning/>
              </el-icon>
            </div>
            <div class="card-info">
              <div class="value">{{ highRiskUserNum}}</div>
              <div class="label">高风险用户</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <index style="width: 100%;"/>

  </div>
</template>

<script setup>
import {computed, onBeforeUnmount, onMounted, ref} from 'vue'
import useUserStore from "@/store/modules/user.js";
import {DocumentAdd, User, Warning} from "@element-plus/icons-vue";
import {totalUser} from "@/api/system/user.js";
import {totalAppointment} from "@/api/appointment/appointment.js";
import {totalHighRiskUser} from "@/api/result/result.js";
import index from "@/views/monitor/cache/index.vue"

const userStore = useUserStore()
const userInfo = ref({})
const currentTime = ref(new Date())
let timer = null
const totalUserNum = ref(0);
const totalAppointmentNum = ref(0);
const highRiskUserNum = ref(0);

// 获取用户信息
userStore.getInfo().then(res => {
  userInfo.value = res.user
})

// 时间处理逻辑
const timePeriod = computed(() => {
  const hour = currentTime.value.getHours()
  if (hour < 5) return '凌晨'
  if (hour < 9) return '早晨'
  if (hour < 12) return '上午'
  if (hour < 14) return '中午'
  if (hour < 18) return '下午'
  return '晚上'
})

const formattedTime = computed(() => ({
  hours: currentTime.value.getHours().toString().padStart(2, '0'),
  minutes: currentTime.value.getMinutes().toString().padStart(2, '0'),
  seconds: currentTime.value.getSeconds().toString().padStart(2, '0')
}))

const currentDate = computed(() => {
  return currentTime.value.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
})

const getTotalUser = () => {
  totalUser().then(res => {
    totalUserNum.value = res.data;
  });
}
const getTotalAppointmentNum = ()=>{
  totalAppointment().then(res=>{
    totalAppointmentNum.value = res.data;
  })
}

const getTotalHighRiskUser = ()=>{
  totalHighRiskUser().then(res=>{
    highRiskUserNum.value = res.data;
  })
}

// 定时器更新
onMounted(() => {
  getTotalUser();
  getTotalAppointmentNum();
  getTotalHighRiskUser();
  timer = setInterval(() => {
    currentTime.value = new Date()
  }, 1000)
})

onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<style lang="scss" scoped>
.admin-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header-bar {
  border-radius: 12px;
  margin-bottom: 20px;

  :deep(.el-card__body) {
    padding: 16px 24px;
  }
}

.data-cards {
  margin-bottom: 20px;

  .stat-card {
    margin-bottom: 20px;
    border-radius: 12px;
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-3px);
    }

    .card-content {
      display: flex;
      align-items: center;
      padding: 16px;

      .card-icon {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;

        .el-icon {
          font-size: 24px;
          color: white;
        }

        &.bg-blue {
          background: #409EFF;
        }

        &.bg-green {
          background: #67C23A;
        }

        &.bg-red {
          background: #F56C6C;
        }

        &.bg-orange {
          background: #E6A23C;
        }
      }

      .card-info {
        .value {
          font-size: 24px;
          font-weight: 600;
          margin-bottom: 4px;
        }

        .label {
          color: #606266;
          font-size: 14px;
        }
      }
    }
  }
}

.chart-card {
  border-radius: 12px;
  margin-bottom: 20px;

  :deep(.el-card__header) {
    border-bottom: none;
    padding: 16px 24px;
    font-weight: 500;
    color: #303133;
  }
}

.admin-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.header-bar {
  border-radius: 12px;
  margin-bottom: 20px;

  :deep(.el-card__body) {
    padding: 16px 24px;
  }
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  .left-section {
    display: flex;
    align-items: baseline;
    gap: 12px;

    .greeting {
      font-size: 20px;
      color: #303133;
      font-weight: 500;
    }

    .username {
      font-size: 24px;
      color: #409EFF;
      font-weight: 600;
    }
  }

  .right-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    .real-time-clock {
      display: inline-flex;
      align-items: center;
      background: #f0f2f5;
      padding: 8px 16px;
      border-radius: 8px;

      .time-part {
        font-size: 24px;
        font-family: 'Courier New', monospace;
        background: #ffffff;
        padding: 4px 8px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        min-width: 36px;
        text-align: center;

        &.seconds {
          color: #67C23A;
          animation: heartbeat 1s infinite;
        }
      }

      .time-separator {
        color: #909399;
        margin: 0 4px;
        font-weight: bold;
      }
    }

    .date-display {
      margin-top: 6px;
      color: #909399;
      font-size: 14px;
    }
  }
}

@keyframes heartbeat {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;

    .right-section {
      align-items: flex-start;
      width: 100%;

      .real-time-clock {
        width: 100%;
        justify-content: space-between;
      }
    }
  }
}
</style>
